<template>
  <el-dialog
    :title="dialogTitle"
    top="16vh"
    :visible.sync="dialogVisible"
    close-on-press-escape
    :before-close="cancel"
    @open="init"
  >
    <div v-loading="loading" class="stock-container" style="padding: 10px;">
      <el-form
        ref="stock"
        :model="stock"
        class="form-container"
        :rules="AddRules"
        label-width="80px"
      >
        <el-form-item label="材料编号" prop="id">
          <el-input v-model="stock.id" readonly />
        </el-form-item>
        <el-form-item label="材料名称" prop="name">
          <el-select
            v-model="stock.name"
            placeholder="请输入选择材料"
            :loading="selectLoading"
            value-key="id"
            @visible-change="getSelectList"
            @change="getEmployeeInfo"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="材料介绍" prop="introduction">
          <el-input v-model="stock.introduction" readonly />
        </el-form-item>
        <el-form-item label="材料数量" prop="number">
          <el-input-number v-model="stock.number" :min="1" label="描述文字" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="stock.remark" />
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;">
          <el-button style="float: right;margin-left: 10px;" type="primary" @click="submitForm('stock')">{{ id? '修改':'添加' }}</el-button>
          <el-button style="float:right;" @click="cancel('stock')">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
// import { parseTime } from '@/utils'
import { addStock, modifyStock, getStockMaterialInfo } from '@/api/stock'
import { getMaterialList, getMaterialInfo } from '@/api/materialInventory'
import { Message } from 'element-ui'

export default {
  name: 'InventoryDialog',
  props: {
    dialogVisible: Boolean,
    dialogTitle: {
      type: String,
      default() {
        return ''
      }
    },
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      stock: {
        id: '',
        introduction: '',
        name: '',
        number: '',
        remark: ''
      },
      selectLoading: false,
      options: [],
      AddRules: { // 对话框表单验证
        name: [{ required: true, message: '材料名称', trigger: 'blur' }],
        number: [{ required: true, message: '材料数量不能为空', trigger: 'blur' }],
        introduction: [{ required: true, message: '材料介绍不能为空', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    init() {
      if (this.id) {
        this.loading = true
        getStockMaterialInfo(this.id).then(res => {
          if (res) {
            this.stock.id = res.data.data.id
            this.stock.name = res.data.data.name
            this.stock.number = res.data.data.number
            this.stock.introduction = res.data.data.introduction
            this.stock.remark = res.data.data.remark
            setTimeout(() => {
              this.listLoading = false
            }, 2 * 1000)
          }
          this.loading = false
        })
      }
    },
    getSelectList() {
      this.selectLoading = true
      getMaterialList().then(res => {
        if (res) {
          const list = res.data.list
          const optionList = []
          list.forEach(item => {
            const obj = {}
            obj.value = item.name + ':' + item.introduction
            obj.id = item.id
            optionList.push(obj)
          })
          this.options = optionList
          setTimeout(() => {
            this.selectLoading = false
          }, 2 * 1000)
        }
        this.selectLoading = false
      })
    },
    getEmployeeInfo(payload) {
      getMaterialInfo(payload.id).then(res => {
        if (res) {
          this.stock.id = payload.id
          this.stock.introduction = res.data.data.introduction
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.id) {
            modifyStock(this.id, this.stock).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.cancel()
              }
            })
            this.$emit('getTable')
          } else {
            this.stock.name = this.stock.name.value
            addStock(this.stock).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.$refs[formName].resetFields()
                this.$emit('closeDialog')
              }
            })
            this.$emit('getTable')
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
      this.$refs.stock.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog {
  height: 420px;
  width: 40%;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 366px;
  padding: 0;
}
.el-form-item{
  margin-bottom: 20px;
}
</style>
